<template>
  <div class="login-page">
    <validate-form @form-submit="onFormSubmit">
      <div class="mb-3">
        <label for="exampleFormControlInput1" class="form-label"
          >邮箱地址</label
        >
        <!--地址验证-->
        <!--v-model 是父传子 传值的作用-->
        <validate-input
          placeholder="请输入正确电子邮箱地址"
          v-model="emailVal"
          :rules="emailRules"
          @value="emailValue"
        >
        </validate-input>
      </div>

      <!--密码验证-->
      <div class="mb-3">
        <label for="exampleFormControlTextarea1" class="form-label">密码</label>
        <validate-input
          placeholder="请输入密码"
          v-model="passwordVal"
          :rules="passwordRules"
          @value="passwordValue"
        >
        </validate-input>
      </div>

      <!-- 插值，插入ValidateForm-->
      <template #submit>
        <span class="btn btn-danger">登录</span>
      </template>
    </validate-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import ValidateForm from '../components/ValidateForm.vue'
import ValidateInput, { RulesProp } from '../components/ValidateInput.vue'
import createMessage from '../hooks/createMessage'

export default defineComponent({
  name: 'LoginIndex',
  components: {
    ValidateForm,
    ValidateInput
  },
  setup () {
    const emailVal = ref('111@test.com')
    // 邮箱验证规则
    const emailRules: RulesProp = [
      // 这个是邮箱的规则，应该被这个东西所约束
      { type: 'required', message: '电子邮箱地址不能为空' },
      { type: 'email', message: '请输入正确的电子邮箱格式' }
    ]

    // 密码验证
    const passwordVal = ref('111111')
    const passwordRules: RulesProp = [
      // 这个是邮箱的规则，应该被这个东西所约束
      { type: 'required', message: '密码不能为空' }
    ]

    // 接收子传的值,实现vue3的双向绑定
    const emailValue = (val: string) => {
      emailVal.value = val
    }

    const passwordValue = (val: string) => {
      passwordVal.value = val
    }

    // 登录
    const store = useStore()
    const router = useRouter()
    // 登录按钮被点击时，接收子组件的参数
    const onFormSubmit = (result: boolean) => {
      console.log('123', result)
      if (result) {
        const payload = {
          email: emailVal.value,
          password: passwordVal.value
        }
        //  发送登录
        store
          .dispatch('loginAndFecth', payload)
          .then(() => {
            createMessage('登录成功 2 秒后跳转到首页', 'success')
            setTimeout(() => {
              router.push('/')
            }, 2000)
          })
          .catch((e) => {
            console.log()
          })
      }
    }

    return {
      emailRules,
      emailVal,
      emailValue,
      onFormSubmit,
      passwordVal,
      passwordRules,
      passwordValue
    }
  }
})
</script>

<style scoped></style>

<!-- <template>
    <div class="login-page">
      <validate-form @form-submit="onFormSubmit">

        <div class="mb-3">
          <label for="formGroupExampleInput" class="form-label">邮箱地址</label> -->
<!--地址验证-->
<!--v-model 是父传子 传值的作用-->
<!-- <vaildate-input placeholder="请输入账号" v-model="emailVal" :rules="emailRules" @value="emailValue">
          </vaildate-input>
        </div> -->

<!--密码验证-->
<!-- <div class="mb-3">
          <label for="formGroupExampleInput2" class="form-label">密码</label>
          <vaildate-input placeholder="请输入密码" v-model="passwordVal" :rules="passwordRules">
          </vaildate-input>
        </div> -->

<!-- 插值，插入ValidateForm-->
<!-- <template #submit>
          <span type="submit" class="btn btn-danger">登录</span>
        </template>
      </validate-form>
    </div>
  </template> -->

<!-- <script lang="ts">
  import {defineComponent, ref} from 'vue'
  import ValidateForm from "@/components/ValidateForm.vue";
  import VaildateInput, {RulesProp} from "@/components/VaildateInput.vue";

  export default defineComponent({
    components: {
      ValidateForm,
      VaildateInput
    },
    setup() {
      const emailVal = ref('')
      //邮箱验证规则
      const emailRules: RulesProp = [
        //这个是邮箱的规则，应该被这个东西所约束
        {type: 'required', message: '电子邮箱地址不能为空'},
        {type: 'email', message: '请输入正确的邮箱规则'}
      ]

      //密码验证
      const passwordVal = ref('')
      const passwordRules: RulesProp = [
        //这个是邮箱的规则，应该被这个东西所约束
        {type: 'required', message: '密码不能为空'}
      ]

      //接收子传的值,实现vue3的双向绑定
      const emailValue = (val: string) => {
        emailVal.value = val
      }

      // 登录按钮被点击时，接收子组件的参数
      const onFormSubmit = (result: boolean) => {
        console.log('123', result)
        if (result) {
          //  发送登录
        }
      }

      return {
        emailRules,
        emailVal,
        emailValue,
        onFormSubmit,
        passwordVal,
        passwordRules
      }
    }
  })
  </script> -->
